import 'dart:io';

import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getwidget/getwidget.dart';
import 'package:images_picker/images_picker.dart';
import 'package:meal/constant/antd_icons.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

class RecommendAdd extends StatefulWidget {
  const RecommendAdd({Key? key}) : super(key: key);

  @override
  State<RecommendAdd> createState() => _RecommendAddState();
}

class _RecommendAddState extends State<RecommendAdd> {
  List<Media> imgs = [];

  List<int> indexs = [];

  double get leftWidth {
    return Sizes.default90;
  }

  double get rowHeight {
    return Sizes.default60;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: ToolsUtils.getDefaultBrnAppBar('商品推荐活动',
          actions: ToolsUtils.actions('保存', pressed: () {})),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              padding:
                  const EdgeInsets.symmetric(horizontal: Sizes.default15, vertical: Sizes.default8),
              decoration: const BoxDecoration(color: Colors.white),
              child: ListBody(
                children: [
                  Container(
                    height: rowHeight,
                    alignment: Alignment.centerLeft,
                    child: Row(
                      children: [
                        Container(
                            width: leftWidth,
                            alignment: Alignment.centerLeft,
                            child: Text.rich(TextSpan(children: [
                              TextSpan(
                                text: '名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color333),
                              ),
                            ]))),
                        Expanded(
                            child: Container(
                          height: Sizes.default45,
                          padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                          margin: const EdgeInsets.only(right: Sizes.default15),
                          decoration: BoxDecoration(
                              color: ColorsUtils.rgba(247, 247, 247, 1),
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(Sizes.default10))),
                          child: TextField(
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color363, fontSize: Sizes.default15),
                            decoration: InputDecoration(
                                border: const OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                ),
                                isCollapsed: true,
                                filled: true,
                                fillColor: Colors.transparent,
                                contentPadding: const EdgeInsets.symmetric(
                                    horizontal: Sizes.default10, vertical: Sizes.default10),
                                constraints: const BoxConstraints(minHeight: Sizes.default45),
                                hintText: '例如398',
                                hintStyle: StylesUtils.customTextStyle(
                                    fontSize: Sizes.default14, color: ColorsUtils.color999)),
                            keyboardType: TextInputType.text,
                            onChanged: (String content) {},
                          ),
                        )),
                      ],
                    ),
                  ),
                  Container(
                    height: rowHeight,
                    alignment: Alignment.centerLeft,
                    child: Row(
                      children: [
                        Container(
                            width: leftWidth,
                            alignment: Alignment.centerLeft,
                            child: Text.rich(TextSpan(
                                text: '活动日期',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color333)))),
                        Expanded(
                          child: InkWell(
                            child: Container(
                              height: Sizes.default45,
                              padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                              alignment: Alignment.centerLeft,
                              decoration: BoxDecoration(
                                  color: ColorsUtils.rgba(247, 247, 247, 1),
                                  borderRadius:
                                      const BorderRadius.all(Radius.circular(Sizes.default10))),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text('请选择起止日期',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: Sizes.default15, color: ColorsUtils.color797)),
                                  BrunoTools.getAssetSizeImage(BrnAsset.iconRightArrow, 16, 16)
                                ],
                              ),
                            ),
                            onTap: () {
                              ToolsUtils.openDateRangePicker(context, onConfirm:
                                  (DateTime startDateTime, DateTime endDateTime,
                                      List<int> startSelectedIndex, List<int> endSelectedIndex) {
                                setState(() {});
                              });
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    height: rowHeight,
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                            width: leftWidth,
                            alignment: Alignment.topLeft,
                            child: Text.rich(
                              TextSpan(
                                  text: '备注说明',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: Sizes.default15, color: ColorsUtils.color333)),
                            )),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                          decoration: BoxDecoration(
                              color: ColorsUtils.rgba(247, 247, 247, 1),
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(Sizes.default10))),
                          child: BrnInputText(hint: '0/500', maxLength: 500, autoFocus: false),
                        ))
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              padding:
                  const EdgeInsets.symmetric(horizontal: Sizes.default15, vertical: Sizes.default8),
              decoration: const BoxDecoration(color: Colors.white),
              child: ListBody(
                children: [
                  Container(
                      margin: const EdgeInsets.only(bottom: Sizes.default15),
                      child: Text.rich(
                        TextSpan(
                            text: '中文海报',
                            style: StylesUtils.customTextStyle(color: ColorsUtils.color333),
                            children: [
                              TextSpan(
                                  text: ' (推荐尺寸960*256)',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color999))
                            ]),
                      )),
                  Container(
                    alignment: Alignment.center,
                    child: Wrap(
                      spacing: Sizes.default10,
                      runSpacing: Sizes.default10,
                      children: [
                        ...imgs.map((e) => Stack(
                              children: [
                                GFImageOverlay(
                                  image: FileImage(File(e.path)),
                                  width: 105,
                                  height: 105,
                                  borderRadius: BorderRadius.circular(Sizes.default5),
                                ),
                                Positioned(
                                    top: 10,
                                    right: 10,
                                    child: IconButton(
                                      onPressed: () {
                                        setState(() {
                                          imgs.remove(e);
                                        });
                                      },
                                      icon: Icon(AntdIcons.delete,
                                          size: Sizes.default20,
                                          color: ColorsUtils.parseColorFromHexString(
                                              ColorsUtils.colorFf0)),
                                    ))
                              ],
                            )),
                        InkWell(
                          onTap: () {
                            ToolsUtils.openCupertinoModalPopup(context, setMediaImg, setMediaImg);
                          },
                          child: Container(
                            width: 105,
                            height: 105,
                            decoration: BoxDecoration(
                                color: ColorsUtils.rgba(247, 247, 247, 1),
                                borderRadius: BorderRadius.circular(Sizes.default5)),
                            alignment: Alignment.center,
                            child: ToolsUtils.getUrlSvg(
                                'https://cdn7.axureshop.com/demo/1525603/images/发布商品_单品/u1046.svg',
                                width: 24,
                                height: 20),
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              padding:
                  const EdgeInsets.symmetric(horizontal: Sizes.default15, vertical: Sizes.default8),
              decoration: const BoxDecoration(color: Colors.white),
              child: ListBody(
                children: [
                  Container(
                    height: rowHeight,
                    alignment: Alignment.centerLeft,
                    child: Row(
                      children: [
                        Container(
                            width: leftWidth,
                            alignment: Alignment.centerLeft,
                            child: Text.rich(
                              TextSpan(
                                  text: '添加商品',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: Sizes.default15, color: ColorsUtils.color333)),
                            )),
                        Expanded(
                          child: InkWell(
                            onTap: openSelectProduct,
                            child: Container(
                              height: Sizes.default45,
                              padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                              alignment: Alignment.centerLeft,
                              decoration: BoxDecoration(
                                  color: ColorsUtils.rgba(247, 247, 247, 1),
                                  borderRadius:
                                      const BorderRadius.all(Radius.circular(Sizes.default10))),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text('0/20',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: Sizes.default15, color: ColorsUtils.color797)),
                                  BrunoTools.getAssetSizeImage(BrnAsset.iconRightArrow, 16, 16)
                                ],
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  void setMediaImg(List<Media> res) {
    setState(() {
      imgs.addAll(res);
    });
  }

  void openSelectProduct() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return StatefulBuilder(
            builder: (BuildContext context, setState) {
              return Material(
                  color: Colors.transparent,
                  elevation: 0,
                  child: Center(
                    child: Container(
                      width: Get.width - 20,
                      height: 350,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(Sizes.default15)),
                      child: Column(
                        children: [
                          Container(
                            height: Sizes.default50,
                            alignment: Alignment.center,
                            child: Text(
                              '添加商品',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default18, color: ColorsUtils.color333),
                            ),
                          ),
                          Container(
                            height: Sizes.default40,
                            padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                            child: BrnSearchText(
                              hintText: '请输入商品名称',
                              hintStyle: StylesUtils.customTextStyle(color: ColorsUtils.color000),
                              innerPadding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                              normalBorder: Border.all(color: ColorsUtils.rgba(228, 228, 228, 1)),
                              innerColor: Colors.white,
                              borderRadius: BorderRadius.zero,
                              onTextChange: (String name) {},
                            ),
                          ),
                          Expanded(
                              child: ListView(
                            padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                            shrinkWrap: true,
                            children: [
                              Container(
                                height: Sizes.default45,
                                margin: const EdgeInsets.only(top: Sizes.default15),
                                child: Row(
                                  children: [
                                    GFImageOverlay(
                                      width: Sizes.default40,
                                      height: Sizes.default40,
                                      image: ToolsUtils.assetImage('shop_header.png'),
                                      borderRadius: BorderRadius.circular(Sizes.default3),
                                    ),
                                    Expanded(
                                        child: Container(
                                      padding: const EdgeInsets.only(left: Sizes.default10),
                                      child: Column(
                                        children: [
                                          Expanded(
                                              child: Align(
                                            alignment: Alignment.topLeft,
                                            child: Text.rich(TextSpan(children: [
                                              TextSpan(
                                                  text: '河村石磨肠粉(',
                                                  style: StylesUtils.customTextStyle(
                                                      color: ColorsUtils.color333)),
                                              TextSpan(
                                                  text: '双蛋',
                                                  style: StylesUtils.customTextStyle(
                                                      color: ColorsUtils.colorFf0)),
                                              TextSpan(
                                                  text: '加肉)',
                                                  style: StylesUtils.customTextStyle(
                                                      color: ColorsUtils.color333))
                                            ])),
                                          )),
                                          Expanded(
                                              child: Align(
                                            alignment: Alignment.bottomLeft,
                                            child: Text(
                                              '￥10',
                                              style: StylesUtils.customTextStyle(
                                                  color: ColorsUtils.color333,
                                                  fontSize: Sizes.default15),
                                            ),
                                          ))
                                        ],
                                      ),
                                    )),
                                    InkWell(
                                      onTap: () {
                                        setState(() {
                                          if (indexs.contains(0)) {
                                            indexs.remove(0);
                                            return;
                                          }
                                          return indexs.add(0);
                                        });
                                      },
                                      child: CustomPaint(
                                        size: const Size(20, 20),
                                        painter: _RadioPaint(checked: indexs.contains(0)),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                              Container(
                                height: Sizes.default45,
                                margin: const EdgeInsets.only(top: Sizes.default15),
                                child: Row(
                                  children: [
                                    GFImageOverlay(
                                      width: Sizes.default40,
                                      height: Sizes.default40,
                                      image: ToolsUtils.assetImage('shop_header.png'),
                                      borderRadius: BorderRadius.circular(Sizes.default3),
                                    ),
                                    Expanded(
                                        child: Container(
                                      padding: const EdgeInsets.only(left: Sizes.default10),
                                      child: Column(
                                        children: [
                                          Expanded(
                                              child: Align(
                                            alignment: Alignment.topLeft,
                                            child: Text.rich(TextSpan(children: [
                                              TextSpan(
                                                  text: '河村石磨肠粉(',
                                                  style: StylesUtils.customTextStyle(
                                                      color: ColorsUtils.color333)),
                                              TextSpan(
                                                  text: '双蛋',
                                                  style: StylesUtils.customTextStyle(
                                                      color: ColorsUtils.colorFf0)),
                                              TextSpan(
                                                  text: '加蛋)',
                                                  style: StylesUtils.customTextStyle(
                                                      color: ColorsUtils.color333))
                                            ])),
                                          )),
                                          Expanded(
                                              child: Align(
                                            alignment: Alignment.bottomLeft,
                                            child: Text(
                                              '￥10',
                                              style: StylesUtils.customTextStyle(
                                                  color: ColorsUtils.color333,
                                                  fontSize: Sizes.default15),
                                            ),
                                          ))
                                        ],
                                      ),
                                    )),
                                    InkWell(
                                      onTap: () {
                                        setState(() {
                                          if (indexs.contains(1)) {
                                            indexs.remove(1);
                                            return;
                                          }
                                          return indexs.add(1);
                                        });
                                      },
                                      child: CustomPaint(
                                        size: const Size(20, 20),
                                        painter: _RadioPaint(checked: indexs.contains(1)),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                              Container(
                                height: Sizes.default45,
                                margin: const EdgeInsets.only(top: Sizes.default15),
                                child: Row(
                                  children: [
                                    GFImageOverlay(
                                      width: Sizes.default40,
                                      height: Sizes.default40,
                                      image: ToolsUtils.assetImage('shop_header.png'),
                                      borderRadius: BorderRadius.circular(Sizes.default3),
                                    ),
                                    Expanded(
                                        child: Container(
                                      padding: const EdgeInsets.only(left: Sizes.default10),
                                      child: Column(
                                        children: [
                                          Expanded(
                                              child: Align(
                                            alignment: Alignment.topLeft,
                                            child: Text.rich(TextSpan(children: [
                                              TextSpan(
                                                  text: '河村石磨肠粉(',
                                                  style: StylesUtils.customTextStyle(
                                                      color: ColorsUtils.color333)),
                                              TextSpan(
                                                  text: '双蛋',
                                                  style: StylesUtils.customTextStyle(
                                                      color: ColorsUtils.colorFf0)),
                                              TextSpan(
                                                  text: '加香肠)',
                                                  style: StylesUtils.customTextStyle(
                                                      color: ColorsUtils.color333))
                                            ])),
                                          )),
                                          Expanded(
                                              child: Align(
                                            alignment: Alignment.bottomLeft,
                                            child: Text(
                                              '￥10',
                                              style: StylesUtils.customTextStyle(
                                                  color: ColorsUtils.color333,
                                                  fontSize: Sizes.default15),
                                            ),
                                          ))
                                        ],
                                      ),
                                    )),
                                    InkWell(
                                      onTap: () {
                                        setState(() {
                                          if (indexs.contains(2)) {
                                            indexs.remove(2);
                                            return;
                                          }
                                          return indexs.add(2);
                                        });
                                      },
                                      child: CustomPaint(
                                        size: const Size(20, 20),
                                        painter: _RadioPaint(checked: indexs.contains(2)),
                                      ),
                                    )
                                  ],
                                ),
                              )
                            ],
                          )),
                          Container(
                            height: Sizes.default50,
                            decoration: BoxDecoration(
                                border: Border(
                                    top: BorderSide(
                                        color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                            child: Row(
                              children: [
                                Expanded(
                                    child: Container(
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                      border: Border(
                                          right: BorderSide(
                                              color:
                                                  ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                                  child: TextButton(
                                    onPressed: () {
                                      Navigator.pop(context, 0);
                                    },
                                    child: Text(
                                      '取消',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color333, fontSize: Sizes.default16),
                                    ),
                                  ),
                                )),
                                Expanded(
                                    child: Container(
                                        alignment: Alignment.center,
                                        child: TextButton(
                                          onPressed: () {
                                            Navigator.pop(context, 1);
                                          },
                                          child: Text('确定',
                                              style: StylesUtils.customTextStyle(
                                                  fontSize: Sizes.default16,
                                                  color: ColorsUtils.colorFf6)),
                                        )))
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ));
            },
          );
        });
  }
}

class _RadioPaint extends CustomPainter {
  final bool checked;

  _RadioPaint({this.checked = false});

  @override
  void paint(Canvas canvas, Size size) {
    if (checked) {
      Paint paint = Paint()
        ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf6)
        ..style = PaintingStyle.fill
        ..strokeCap = StrokeCap.round
        ..isAntiAlias = true;
      Rect rect3 =
          Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: size.width / 2);
      Rect rect4 =
          Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: size.width / 4);
      RRect outer = RRect.fromRectAndRadius(rect3, Radius.circular(size.width / 2));
      RRect inner = RRect.fromRectAndRadius(rect4, Radius.circular(size.width / 4));
      canvas.drawDRRect(outer, inner, paint);
    } else {
      double radius = size.width / 2;
      Paint paint = Paint()
        ..color = ColorsUtils.parseColorFromHexString('#D7D7D7')
        ..style = PaintingStyle.stroke
        ..strokeWidth = 1.0
        ..isAntiAlias = false;
      canvas.drawCircle(Offset(size.width / 2, size.height / 2), radius, paint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}
